<template>
  <div class="item">
    <nav-bar
      class="suckTop"
      title="商品详细信息"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #right>
        <icon name="ellipsis" size="18" />
      </template>
    </nav-bar>
    <div style="padding: 2rem 1rem">
      <h2>{{ productList.name }}</h2>
      <p style="padding: 1rem 0; color: #369">￥{{ productList.price }}</p>
      <div v-html="productList?.content"></div>
    </div>
    <ActionBar>
      <action-bar-icon icon="wap-home-o" text="首页" @click="onClickHome" />
      <action-bar-icon
        icon="cart-o"
        text="购物车"
        @click="onClickCart"
        :badge="cartCount"
      />
      <action-bar-icon icon="shop-o" text="店铺" @click="onClickIcon" />
      <action-bar-button
        type="danger"
        text="加入购物车"
        @click="onClickButton(productList)"
      />
    </ActionBar>
  </div>
</template>
<script setup>
import {
  NavBar,
  Toast,
  Icon,
  ActionBar,
  ActionBarIcon,
  ActionBarButton,
  Badge,
} from "vant";
import { ref } from "vue";
import { storeToRefs } from "pinia";
import { useRouter, useRoute } from "vue-router";
import { productInfoAPI } from "../../services/auth";
import { isLogin } from "../../uitils/Token";
import { useCart } from "../../store/carts";
const { cartCount } = storeToRefs(useCart());

const { addToCart } = useCart();
const router = useRouter();
const route = useRoute();
const productList = ref({});
const onClickLeft = () => {
  router.go(-1);
};
const onClickRight = () => Toast("加入");
const onClickHome = () => {
  router.push({
    name: "home",
  });
};
const onClickCart = () => {
  router.push({
    name: "cart",
  });
};
const onClickIcon = () => Toast("点击图标");
// 加入购物车
const onClickButton = (productList) => {
  if (isLogin()) {
    // 加入购物车
    addToCart(productList.id, 1, productList.price);
    Toast.success("加入购物车成功");
  } else {
    Toast.fail("请先登录");
    setTimeout(() => {
      router.push({
        name: "login",
      });
    }, 2000);
  }
};
// 获取商品详情信息
productInfoAPI(route.query.id).then((res) => {
  // console.log(res);
  productList.value = res.data;
});
</script>
<style lang="scss">
.item {
  .suckTop {
    position: sticky;
    top: 0;
    z-index: 999;
  }
}
</style>
